<template>
	<div class="login-wrap">
		<div class="w">
			<div class="logo-wrap">
				<img src="@/assets/logo.png" alt="">
			</div>
			<div class="input-wrap">
				<mu-form :model="regForm" class="mu-demo-form" :label-position="labelPosition" ref="form">
					<mu-form-item prop="nickname" label="昵称" v-if="type==1" :label-float="true" :rules="rules.register.nickname" >
						<mu-text-field v-model="regForm.nickname"></mu-text-field>
					</mu-form-item>
					<mu-form-item prop="phone" label="手机号码" :label-float="true" :rules="rules.register.cellphone" class="relative" >
						<mu-text-field v-model="regForm.phone"></mu-text-field>
						<!-- <div class="send_captcha">发送验证码</div> -->
						<my-captcha :phone="regForm.phone" :captcha="regForm.captcha" ref="captch"></my-captcha>
					</mu-form-item>
					<mu-form-item prop="captcha" label="验证码" :label-float="true" :rules="rules.register.captcha" >
						<mu-text-field v-model="regForm.captcha"></mu-text-field>
					</mu-form-item>
					<mu-form-item prop="password" label="登录密码" :label-float="true" :rules="rules.register.password" >
						<mu-text-field v-model="regForm.password" :action-icon="visibility ? 'visibility_off' : 'visibility'" :action-click="() => (visibility = !visibility)" :type="visibility ? 'text' : 'password'"></mu-text-field>
					</mu-form-item>
				</mu-form>
				<mu-button color="primary" @click="handlerReg">注册</mu-button>
			</div>
		</div>
	</div>
</template>

<script>
	import MyCaptcha from '@/components/Captcha/Index.vue';
	export default{
		data(){
			return{
				type: 1,
				visibility: false,
				labelPosition: 'top',
				regForm:{
					nickname: 'kj',
					phone: '18888888888',
					captcha: '12',
					password: '123456',
				}
			}
		},
		mounted(){
			this.$nextTick(()=>{
				console.log(this.rules)
			})
		},
		methods:{
			handlerReg(){
				this.$refs.form.validate().then((result) => {
					if(result === true){
						this.checkCaptcha();
					}
				});
			},
			checkCaptcha(){
				this.$refs.captch.checkCaptcha(this._captchaRes);
				// return x;
			},
			_captchaRes(res){
				if(res) this.register();
				// console.log(res)
			},
			register(){
				this.$api.get(this.ApiPath.captch.register,this.regForm,success=>{
					this.$store.commit('_set_profile',success.data);

					this.$alert(`${success.data.profile.nickname},欢迎回来~`);
					// console.log(success.data);
				})
			}
		},
		components:{
			MyCaptcha
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/style/base/_color.scss';

	.login-wrap{
		height: 100%;
		display: flex;
		align-items: center;
	}
	.input-wrap{
		padding: 10px;
	}
	.send_captcha{
		position: absolute;
		right: 0;
		color: $blue;
	}
</style>